import React from 'react';
import {observer} from 'mobx-react';
import {Table, Badge, Tooltip, Divider, Button, Icon} from 'antd';
import ComForm from './Form';
import store from './store';
import GoodsOrderDetail from "./Detail";

@observer
class OrderTable extends React.Component {
  componentDidMount() {
    store.fetchRecords();
  }

  getStatusBadge = (status) => {
    const statusMap = {
      'pending': { status: 'warning', text: '待支付' },
      'paid': { status: 'success', text: '已支付' },
      'cancelled': { status: 'default', text: '已取消' }
    };
    const { status: badgeStatus, text } = statusMap[status] || { status: 'default', text: status };
    return <Badge status={badgeStatus} text={text} />;
  };

  // 处理表格行选择变化
  handleTableSelectChange = (selectedRowKeys, selectedRows) => {
    console.log('选中的行:', selectedRowKeys, selectedRows);
    store.updateSelection(selectedRowKeys, selectedRows);
  };

  columns = [{
    title: '订单编号',
    dataIndex: 'order_no',
    width: 180,
    fixed: 'left',
  }, {
    title: '学生姓名',
    dataIndex: 'student_name',
    width: 100,
  }, {
    title: '家长姓名',
    dataIndex: 'parent_name',
    width: 100,
  }, {
    title: '家长手机',
    dataIndex: 'parent_phone',
    width: 120,
  }, {
    title: '学员类型',
    dataIndex: 'student_type',
    width: 100,
  }, {
    title: '上课类型',
    dataIndex: 'class_type',
    width: 100,
    render: (text) => text === 'in_school' ? '校内上课' : '校外上课'
  }, {
    title: '年级/班级',
    dataIndex: 'grade',
    width: 100,
    render: (text, record) => {
      if (!text) return '-';
      const gradeMap = {
        'grade_1': '高一',
        'grade_2': '高二',
        'grade_3': '高三'
      };
      const grade = gradeMap[text] || text;
      const classNumber = record.class_number ? record.class_number.replace('class_', '') + '班' : '';
      return `${grade}${classNumber ? ' ' + classNumber : ''}`;
    }
  }, {
    title: '学校',
    dataIndex: 'school_name',
    width: 150,
    ellipsis: true,
    render: (text) => (
      <Tooltip title={text}>
        <span>{text}</span>
      </Tooltip>
    )
  }, {
    title: '考试年份',
    dataIndex: 'exam_year',
    width: 100,
  }, {
    title: '订单金额',
    dataIndex: 'total_amount',
    width: 100,
    render: (text) => `¥${text}`
  }, {
    title: '支付方式',
    dataIndex: 'payment_type',
    width: 100,
    render: (text) => text === 'wechat' ? '微信支付' : '线下汇款'
  }, {
    title: '付款码',
    dataIndex: 'payment_code',
    width: 120,
    render: (text) => text || '-'
  }, {
    title: '订单状态',
    dataIndex: 'status',
    width: 100,
    render: (text) => this.getStatusBadge(text)
  }, {
    title: '创建时间',
    dataIndex: 'created_at',
    width: 150,
  }, {
    title: '支付时间',
    dataIndex: 'paid_time',
    width: 150,
    render: (text) => text || '-'
  }, {
    title: '操作',
    width: 180,
    fixed: 'right',
    render: info => (
      <span>
        <a className="span-button" onClick={() => store.showDetail(info)}>详情</a>
        {info.status === 'pending' && (
          <>
            <Divider type="vertical" />
            <a className="span-button" onClick={() => store.cancelOrder(info.id)}>取消</a>
          </>
        )}
        {info.status === 'pending' && info.payment_type === 'offline' && (
          <>
            <Divider type="vertical" />
            <a className="span-button" onClick={() => store.confirmPayment(info.id)}>确认支付</a>
          </>
        )}
      </span>
    )
  }];

  render() {
    // 表格行选择配置
    const rowSelection = {
      selectedRowKeys: store.selectedRowKeys,
      onChange: this.handleTableSelectChange,
    };

    return (
      <React.Fragment>
        <Table 
          rowKey="id" 
          rowSelection={rowSelection}
          pagination={{ 
            showSizeChanger: true, 
            showTotal: (total) => `总计 ${total} 条`,
            defaultPageSize: 10,
            pageSizeOptions: ['10', '20', '50', '100']
          }}  
          loading={store.isFetching} 
          dataSource={store.records} 
          columns={this.columns}
          scroll={{ x: 1800 }}
        />
        {store.formVisible && <ComForm/>}
        {store.detailVisible && <GoodsOrderDetail/>}
      </React.Fragment>
    )
  }
}

export default OrderTable
